{% extends 'jingsongshuyuan/index.html' %}
{% load static %}
{% block title %}劲松书院 - 首页{% endblock %}

{% block css %}
    <style>
        .main-hr {
            border: 0;
            height: 1px;
            background-color: rgb(0, 82, 46);
            margin: 0;
        }
        .caro-font {
            background-color: rgba(0, 0, 0, 0.6);
            font-size: 20px;
            padding: 1%;
        }
        .p-head {
            font-size: 15px;
            color: rgb(44, 44, 44);
        }
    </style>
{% endblock %}

{% block content %}
    <div class="row" style="padding: 0 6.5%;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div style="height: 60px;"></div>
                <div class="row">
                    <div class="col-md-2">
                        <div class="list-group text-center" style="position: sticky; top: 100px; font-size: 13px;">
                            <a href="#" class="list-group-item list-group-item-action text-light disabled" style="background-color: rgb(0, 82, 46);">概览</a>
                            <a href="#image" id="jump-to-image" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">图片</a>
                            <a href="#intro" id="jump-to-intro" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">简介</a>
                            <a href="#desti" id="jump-to-desti" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">目标</a>
                            <a href="#frame" id="jump-to-frame" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">架构</a>
                            <a href="#curre" id="jump-to-curre" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">时事</a>
                        </div>
                        <!--<div id="sub-navbar" class="list-group text-center" style="position: sticky; top: 310px; font-size: 13px;">
                            <a href="#" class="list-group-item list-group-item-action text-light disabled" style="background-color: rgb(0, 82, 46);">劲松书院</a>
                            <a href="#" id="jump-to-curre" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">首页</a>
                            <a href="#" id="jump-to-image" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">国际化专栏</a>
                            <a href="#" id="jump-to-intro" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">书院架构</a>
                            <a href="#" id="jump-to-desti" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">导师风采</a>
                            <a href="#" id="jump-to-frame" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">书院社团</a>
                            <a href="#" id="jump-to-curre" class="list-group-item list-group-item-action" style="background-color: rgb(250, 252, 246);">精品活动</a>
                        </div>-->
                    </div>

                    <div class="col-md-1"></div>

                    <!-- 从这开始是右侧内容 -->
                    <div class="col-md-9">
                        <!-- section-1的内容 -->
                        <span id="image" class="p-head">
                            <svg style="color: rgb(0, 82, 46);" class="bi bi-caret-up-fill" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
                            </svg>
                            图片
                        </span>
                        <hr class="main-hr">
                        <div style="height: 50px;"></div>
                        <div class="row">
                            <div class="col-md-1"></div>
                            <div class="col-md-10">
                                <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel">
                                    <ol class="carousel-indicators">
                                        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                                        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                                        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                                        <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
                                        <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
                                        <li data-target="#carouselExampleCaptions" data-slide-to="5"></li>
                                        <li data-target="#carouselExampleCaptions" data-slide-to="6"></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <div class="carousel-item active">
                                            <img src="{% static 'jingsongimg/master.jpg' %}" class="d-block w-100" alt="headmaster">
                                            <div class="carousel-caption d-none d-md-block">
                                                <span class="caro-font">徐晓飞校长揭牌</span>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{% static 'jingsongimg/outdoor1.jpg' %}" class="d-block w-100" alt="outdoor1">
                                            <div class="carousel-caption d-none d-md-block">
                                                <span class="caro-font">劲松书院外部环境</span>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{% static 'jingsongimg/outdoor2.jpg' %}" class="d-block w-100" alt="outdoor2">
                                            <div class="carousel-caption d-none d-md-block">
                                                <span class="caro-font">劲松书院外部环境</span>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{% static 'jingsongimg/office1.jpg' %}" class="d-block w-100" alt="office1">
                                            <div class="carousel-caption d-none d-md-block">
                                                <span class="caro-font">劲松书院内部环境</span>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{% static 'jingsongimg/office2.jpg' %}" class="d-block w-100" alt="office2">
                                            <div class="carousel-caption d-none d-md-block">
                                                <span class="caro-font">劲松书院内部环境</span>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{% static 'jingsongimg/setup1.jpg' %}" class="d-block w-100" alt="setup1">
                                            <div class="carousel-caption d-none d-md-block">
                                                <span class="caro-font">第一届劲松书院管委会合照</span>
                                            </div>
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{% static 'jingsongimg/setup2.jpg' %}" class="d-block w-100" alt="setup2">
                                            <div class="carousel-caption d-none d-md-block">
                                                <span class="caro-font">第二届劲松书院管委会合照</span>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-1"></div>
                        </div>
                        <div style="height: 30px;"></div>

                        <!-- section-2的内容 -->
                        <span id="intro" class="p-head">
                            <svg style="color: rgb(0, 82, 46);" class="bi bi-caret-up-fill" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
                            </svg>
                            简介
                        </span>
                        <hr class="main-hr">
                        <div style="height: 50px;"></div>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;劲松书院是我校于2017年4月13日成立的以第八、第九公寓为办公基础建设的第四个书院， 目前已邀请校内外具有国外、境外学习工作经历的教师、企业友人、校友等数十人担任书院导师，并将八、 九公寓14个专用房间，近500平米的空间用于支持书院办公。</p>
                        <div style="height: 30px;"></div>

                        <!-- section-3的内容 -->
                        <span id="desti" class="p-head">
                            <svg style="color: rgb(0, 82, 46);" class="bi bi-caret-up-fill" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
                            </svg>
                            目标
                        </span>
                        <hr class="main-hr">
                        <div style="height: 50px;"></div>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;劲松书院旨在提高大学生国际化能力，拓宽学生国际化视野，促进大学生对多元文化的了解与认知，培养跨文化沟通能力;同时提升大学生对中国传统文化与当代社会的了解与认同。倡导积极健康生活方式的养成，并结合专业开展具有互联网时代特色的活动。</p>
                        <div style="height: 30px;"></div>
                        <div class="row">
                            <div class="col-md-6">
                                <img src="{% static 'jingsongimg/destination.png' %}" alt="destination" style="width: 100%;">
                            </div>
                            <div class="col-md-6">
                                <img src="{% static 'jingsongimg/eight.png' %}" alt="eight" style="width: 100%;">
                            </div>
                        </div>
                        <div style="height: 30px;"></div>

                        <!-- section-4的内容 -->
                        <span id="frame" class="p-head">
                            <svg style="color: rgb(0, 82, 46);" class="bi bi-caret-up-fill" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
                            </svg>
                            架构
                        </span>
                        <hr class="main-hr">
                        <div style="height: 60px;"></div>
                        <h2 class="text-center">尚未施工，敬请期待</h2>
                        <div style="height: 60px;"></div>

                        <!-- section-5的内容 -->
                        <span id="curre" class="p-head">
                            <svg style="color: rgb(0, 82, 46);" class="bi bi-caret-up-fill" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
                            </svg>
                            时事
                        </span>
                        <hr class="main-hr">
                        <div style="height: 30px;"></div>
                        <div class="text-right">
                            <a href="#" style="color: rgb(44, 44, 44); font-size: 18px">>>MORE</a>
                        </div>
                        <div style="height: 20px;"></div>
                        <div class="card-deck text-center">
                            <div id="card-1" class="card">
                                <div class="card-body">
                                    <img src="{% static 'jingsongimg/logo.png' %}" alt="" width="100%;">
                                    <span class="card-title">（这里是题目）</span>
                                </div>
                                <p class="text-muted" style="font-size: 12px;">——2020.5.25——</p>
                            </div>
                            <div id="card-2" class="card">
                                <div class="card-body">
                                    <img src="{% static 'jingsongimg/logo.png' %}" alt="" width="100%;">
                                    <span class="card-title">（这里是题目）</span>
                                </div>
                                <p class="text-muted" style="font-size: 12px;">——2020.5.25——</p>
                            </div>
                            <div id="card-3" class="card">
                                <div class="card-body">
                                    <img src="{% static 'jingsongimg/logo.png' %}" alt="" width="100%;">
                                    <span class="card-title">（这里是题目）</span>
                                </div>
                                <p class="text-muted" style="font-size: 12px;">——2020.5.25——</p>
                            </div>
                        </div>
                        <div style="height: 50px;"></div>
                    </div>
                </div>
        </div>
        <div class="col-md-1"></div>
    </div>
{% endblock %}

{% block javascript %}
    <script>
        $("#sub-navbar").hide();
        $(document).ready(function(){
            $("#jump-to-image").click(function(){
                $("html,body").animate({scrollTop: $("#image").offset().top}, 800);
            })
            $("#jump-to-intro").click(function(){
                $("html,body").animate({scrollTop: $("#intro").offset().top}, 800);
            })
            $("#jump-to-desti").click(function(){
                $("html,body").animate({scrollTop: $("#desti").offset().top}, 800);
            })
            $("#jump-to-frame").click(function(){
                $("html,body").animate({scrollTop: $("#frame").offset().top}, 800);
            })
            $("#jump-to-curre").click(function(){
                $("html,body").animate({scrollTop: $("#curre").offset().top}, 800);
            })

            $(window).scroll(function(){
                if($(window).scrollTop() >= 180){
                    $("#sub-navbar").fadeIn(800);
                }
                else {
                    $("#sub-navbar").fadeOut(200);
                }
            })

            $("#card-1").hover(function(){
                $("#card-1").toggleClass("shadow");
            })
            $("#card-2").hover(function(){
                $("#card-2").toggleClass("shadow");
            })
            $("#card-3").hover(function(){
                $("#card-3").toggleClass("shadow");
            })
        })
    </script>
{% endblock %}